<div 
            cdkDrag
            cdkDragBoundary="#whiteboard-zone"

            (cdkDragStarted)="dragStarted($event)" 
            (cdkDragEnded)="dragEnded($event)"
            (cdkDragMoved)="dragMoved($event)"
            
            class="wb-ctl-zone"
>
    <div class="wb-ctl">
        <div class="ctl-bar" (click)="toggleShow()"></div>
        <div class="ctl-tools" *ngIf="toggle">
            <ul>
                <li class="ctl-tool-box" *ngFor="let item of tools"
                    [class.active]="item === selectedItem || item.isActive">
                    <a [ngClass]="['tool-item', item.name ]"
                       (click)="onSelectItem(item)"
                      [title]="item.title"></a>
                    <div *ngIf="item.isPalette" class="tool-palette-box">
                        <app-palette [toolItem]="item"></app-palette>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
